import React from 'react'
import { Table ,Button,Modal,Select } from 'antd';
const { Option } = Select;
let  provinceData = []
let  cityData  = {}
function deletedata (obj){
  let mydata = []
  data.forEach((item)=>{
      mydata.push(item.key)
  })
  let num = mydata.indexOf(obj.key)
  data.splice(num,1)
  // console.log(data);
  // data=[]
  // console.log(data);
  
}
function adddata (){
  console.log(data);
  
}
const columns = [
    { title: '部门', dataIndex: 'value', key: 'value' ,width: 1100,},
    {
      title: '操作',
      dataIndex: '',
      key: 'x',
      render: (text, record) => <Mybtn adddata={adddata.bind(this)} mydeletedata={deletedata} style={{ marginRight: 16 }} btndata={record} />
    },
  ];
  
let data = [
  {
    key: 1,
    value: '新房编辑部',
    label: '新房编辑部',
    children:[
      {key: '1-1',value:'高新区编辑部',label: '高新区编辑部'},
      {key: '1-2',value:'青羊区编辑部',label: '青羊区编辑部'}
    ]
  },
  {
    key: 2,
    value: '运营部',
    label: '运营部',
    children:[{key: '2-1',value:'张二娃',label: '张二娃',zhiwei:'主编'},{key: '2-2',value:'张学友',label: '张学友',zhiwei:'编辑'}]
  }
];

class Bm extends React.Component {
    constructor(){
        super()
        this.state = {
            visible:false,
            bjinputv:'',
            cities: [],
            secondCity: [],
        }
    }
    componentDidMount(){
       data.forEach((item)=>{
          provinceData.push(item.value)
          cityData[item.value] = []
          item.children.forEach((item2)=>{
            cityData[item.value].push(item2.value)
          })
      })
      this.setState({
        cities: cityData[provinceData[0]],
        secondCity: cityData[provinceData[0]][0],
      })
    }
    addbumen=()=>{
      this.setState({
        visible:true
      })
    }
    handleProvinceChange = value => {
      this.setState({
        cities: cityData[value],
        secondCity: cityData[value][0],
      });
    };
  
    onSecondCityChange = value => {
      this.setState({
        secondCity: value,
      });
    };
    //modal
    modalCancel=()=>{
      this.setState({
          visible:false
      })
      // this.componentDidMount()
  }
  bianjibtn=()=>{
      this.setState({
          visible:false
      })
  }
    render() {
      const { cities } = this.state;
        return (
           <div >
                <div style={{  padding: '0 0 10px' }}>
                    <Button onClick={this.addbumen} type='primary'>添加部门  </Button>
                </div>
               <Table
                    columns={columns}
                    expandable={{
                    // expandedRowRender: record => <p style={{ margin: 0 }}>{record.description}</p>,
                    // rowExpandable: record => record.name !== 'Not Expandable',
                    }}
                    dataSource={data}
                />,
                <Modal
                    title="新增"
                    visible={this.state.visible}
                    onCancel={this.modalCancel}
                    footer={[
                        <Button key='modalqueding' type='primary'  onClick={this.bianjibtn}>
                            确定
                        </Button>,
                        <Button key='modalquxiao' onClick={this.modalCancel}>
                            取消
                        </Button>
                    ]}
                >
                    <>
                      <Select
                        defaultValue={provinceData[0]}
                        style={{ width: 120 }}
                        onChange={this.handleProvinceChange}
                      >
                        {provinceData.map(province => (
                          <Option key={province}>{province}</Option>
                        ))}
                      </Select>
                      <Select
                        style={{ width: 120 }}
                        value={this.state.secondCity}
                        onChange={this.onSecondCityChange}
                      >
                        {cities.map(city => (
                          <Option key={city}>{city}</Option>
                        ))}
                      </Select>
                    </>
                </Modal>
           </div>
        )
    }
}
class Mybtn extends React.Component {
    bmbj=()=>{
        console.log(this.props.btndata);
        
    }
    bmdelete=()=>{
      console.log(this.props.btndata);
      this.props.mydeletedata(this.props.btndata)
    }
    render(){
        return(
            <div>
                <Button onClick={this.bmbj}>编辑</Button>
                <Button onClick={this.bmdelete}>删除</Button>
            </div>
        )
    }
}
export default Bm